<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="">
    <meta name="author" content="" />

    <link href="$!{__beat.servletContext.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.servletContext.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link href="$!{__beat.servletContext.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="$!{__beat.servletContext.contextPath}/css/wnl.css">
    <title>热门城市排行榜</title>
   <style type="text/css">
        th, td{
            text-align:center;
        }
        .table tbody>tr>td{
            padding: 5px;
        }
     </style>    
</head>
<body>


        <div class="container-fluid">

            <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.servletContext.contextPath}/netflow/topNCity" method="post">
                        <div class="form-group" style="width:180px">
                                <label for="businessName" style="padding-left:15px;">业务线：</label>
                                <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                                   #foreach($buss in $businessList)
                                   #set($i = $velocityCount - 1)
                                        <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                                    #end  
                                </select>
                        </div>

                        <div class="form-group" style="width:180px">
                            <label for="platform">平 台：</label>
                            <select id="platform" name="platform" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="all">全部</option>
                                    <option value="pc"#if("pc" == $!platform) selected #end>PC</option>
                                    <option value="m"#if("m" == $!platform) selected #end>M</option>
                                    <option value="app"#if("app" == $!platform) selected #end>APP</option>
                            </select>
                        </div>    

                        <label for="dateDiv">日 期：</label>
                        <div class="form-group" style="width:110px">
                            <div id="dateDiv" class="input-group date" >
                               <input data-date-format="yyyy-mm-dd" value="$!stat_date" data-date-end-date="-1d" id="stat_date" class="form-control input-sm" name="stat_date" size="16" type="text" placeholder="选择时间">
                               <span class="help-block"></span>
                            </div> 
                        </div>
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="portlet">
                        <div class="portlet-header">
                            <h3>
                                <i class="fa fa-table"></i>
                                $!{businessName_CN}热门城市排行榜TOP30
                            </h3>
                        </div> <!-- /.portlet-header -->

                        <div class="portlet-content">                       
                            <div class="table-responsive">
                            <table 
                               class="table table-striped table-bordered table-hover " 
                                data-provide="datatable" 
                            >
                                    <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>热门城市</th>
                                            <th data-sortable="true" data-direction="desc">UV</th>
                                            <th data-sortable="true">PV</th>
                                            <th data-sortable="false"class="hidden-xs hidden-sm">UV占比</th>
                                            <th data-sortable="true" class="hidden-xs hidden-sm">VPPV/UV</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    #foreach($vo in $topDataList)
                                     #set($i = $velocityCount - 1 )
                                        #if($i != 0)
                                        <tr>
                                            <td>$i</td>
                                            <td>$!{vo.city_name}</td>
                                            <td>$!{vo.uv}</td>
                                            <td>$!{vo.pv}</td>                                            
                                            <td class="hidden-xs hidden-sm">$!{vo.uvRatio}</td>
                                            <td class="hidden-xs hidden-sm">$vtool.trans2Float(${vo.vppvDIVuv})</td>
                                        </tr>
                                        #end                                   
                                    #end                                        
                                    </tbody>
                                </table>
                            </div> <!-- /.table-responsive -->
                            

                        </div> <!-- /.portlet-content -->

                    </div> <!-- /.portlet -->

                

                </div> <!-- /.col -->

            </div> <!-- /.row -->



            <div class="row" id="heatCity" style="height:450px; "></div>

        </div>
     
</body>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/js/libs/jquery-1.9.1.min.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/js/plugins/datatables/DT_bootstrap.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.servletContext.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.servletContext.contextPath}/echarts2/dist/echarts.js"></script>
<!-- <script src="$!{__beat.servletContext.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.servletContext.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">

    $('#stat_date').datepicker({
        startView: "month",
        minView: "year",
        maxView: "month",
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        startDate:"2014-01-01"
    });

    var charts = []; 

    var businessName="$businessName";
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.servletContext.contextPath}/echarts2/dist",dashboard: "$!{__beat.servletContext.contextPath}/js/"}});
    require(['dashboard/heatCityUV_v2'],function(heatCityEC){
        charts.push(heatCityEC);
        heatCityEC.show(businessName);
    });

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.echart.resize();
        });
    });
   
</script> 
</html>
